<template>
  <div>
    <!--新闻-->
    <!-- nav -->
    <whiteNav></whiteNav>
    <!-- 二级导航 -->
    <div class="sub-nav">
      <div class="sub-nav-list">
        <div
          @click="handleColor(index)"
          :class="[issubnavActive == index ? 'sub-nav-item-active' : '']"
          class="sub-nav-item"
          v-for="(item, index) in subnav"
          :key="index"
        >
          {{ item.subtitle }}
        </div>
      </div>
    </div>
    <!-- 导航联动list内容 -->
    <div class="news">
      <!-- 导航项名称 -->
      <div class="news-title">{{ $t("allnewstitle") }}</div>
      <!-- 联动列表 -->
      <div class="news-list">
        <div class="news-item">
          <!-- 左图 -->
          <div class="news-item-icon">
            <img src="../assets/image/新闻详情背景.png" alt="" />
          </div>
          <!-- 右文字 -->
          <div class="news-item-right">
            <div class="news-item-right-title">
              {{ $t("newsitemrighttitle1") }}
            </div>
            <div class="news-item-right-article">
              {{ $t("newsitemrightarticle") }}
            </div>
            <div class="news-item-date">
              <div class="date">2021年07月26日</div>
              <div class="readmore">{{ $t("readmore") }}</div>
            </div>
          </div>
        </div>
        <div class="news-item">
          <!-- 左图 -->
          <div class="news-item-icon">
            <img src="../assets/image/新闻详情背景.png" alt="" />
          </div>
          <!-- 右文字 -->
          <div class="news-item-right">
            <div class="news-item-right-title">
              {{ $t("newsitemrighttitle2") }}
            </div>
            <div class="news-item-right-article">
              {{ $t("newsitemrightarticle") }}
            </div>
            <div class="news-item-date">
              <div class="date">2021年07月26日</div>
              <div class="readmore">{{ $t("readmore") }}</div>
            </div>
          </div>
        </div>
        <div class="news-item">
          <!-- 左图 -->
          <div class="news-item-icon">
            <img src="../assets/image/新闻详情背景.png" alt="" />
          </div>
          <!-- 右文字 -->
          <div class="news-item-right">
            <div class="news-item-right-title">
              {{ $t("newsitemrighttitle3") }}
            </div>
            <div class="news-item-right-article">
              {{ $t("newsitemrightarticle") }}
            </div>
            <div class="news-item-date">
              <div class="date">2021年07月26日</div>
              <div class="readmore">{{ $t("readmore") }}</div>
            </div>
          </div>
        </div>
        <div class="news-item">
          <!-- 左图 -->
          <div class="news-item-icon">
            <img src="../assets/image/新闻详情背景.png" alt="" />
          </div>
          <!-- 右文字 -->
          <div class="news-item-right">
            <div class="news-item-right-title">
              {{ $t("newsitemrighttitle4") }}
            </div>
            <div class="news-item-right-article">
              {{ $t("newsitemrightarticle") }}
            </div>
            <div class="news-item-date">
              <div class="date">2021年07月26日</div>
              <div class="readmore">{{ $t("readmore") }}</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 分页器 -->
      <div class="news-pagenation text-center">
        <a-pagination v-model="current" :total="71" show-less-items />
      </div>
    </div>
    <!-- links -->
    <links></links>
    <!-- footer -->
    <myfooter></myfooter>
    <!-- 侧边栏返回顶部 -->
    <returnTop></returnTop>
  </div>
</template>

<script>
import whiteNav from "../components/whiteNav.vue";
import myfooter from "../components/myFooter.vue";
import links from "../components/links.vue";
import returnTop from "../components/returnTop.vue";

export default {
  name: "news",
  components: {
    whiteNav,
    myfooter,
    links,
    returnTop,
  },
  data() {
    return {
      current: 1,
      // 二级导航
      subnav: [
        {
          subtitle: "全部",
        },
        {
          subtitle: "公司动态",
        },
        {
          subtitle: "安全新闻",
        },
        {
          subtitle: "行业资讯",
        },
        {
          subtitle: "常见问题",
        },
      ],
      issubnavActive: "",
    };
  },
  methods: {
    handleColor(index) {
      this.issubnavActive = index;
    },
  },
};
</script>

<style lang="less" scoped>
img {
  display: block;
  width: 100%;
}

// 移动端
@media (max-width: 768px) {
}

// pc端(大于768)
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
  // pc共用
  .dflex {
    display: flex;
  }
  .ml-20 {
    margin-left: 20px;
  }
  .mt-20 {
    margin-top: 10px;
  }
  .mb-20 {
    margin-bottom: 10px;
  }
  //   二级导航
  .sub-nav {
    padding: 16px 0;
    background: url("../assets/image/新闻导航bg.png") no-repeat right;
    .sub-nav-list {
      margin: 0 auto;
      width: 1200px;
      display: flex;
      .sub-nav-item {
        margin-right: 60px;
        cursor: pointer;
        color: #ccc;
      }
      .sub-nav-item-active {
        color: #fff;
      }
    }
  }
  //   导航联动list内容
  .news {
    margin: 0 auto;
    width: 1200px;
    padding: 30px 0 100px 0;
    .news-title {
      font-size: 16px;
      color: #000;
    }
    .news-list {
      .news-item {
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #ccc;
        padding: 30px 0;
        .news-item-icon {
          margin-right: 40px;
        }
        .news-item-right {
          display: flex;
          flex-wrap: wrap;
          flex-direction: column;
          justify-content: space-between;
          .news-item-right-title {
            color: #000;
            font-size: 18px;
          }
          .news-item-date {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .readmore {
              color: orange;
              cursor: pointer;
            }
          }
        }
      }
      .news-item:last-child {
        border: none;
      }
    }
    //   分页器
    .news-pagenation {
      margin-top: 60px;
    }
  }
}

// 大于992
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}

// 大于1200px
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}
</style>
